<template>
  <el-skeleton animated :rows="7" :loading="loading">
    <template #default>
      <div class="infinite">
        <ul class="top">
          <li>插件名称</li>
          <li>插件简介</li>
          <li>插件地址</li>
        </ul>
        <vueSeamless
          ref="scroll"
          :data="list"
          :class-option="defaultOption"
          class="warp"
        >
          <ul class="item">
            <li v-for="item in list" :key="item.name">
              <span>{{ item.name }}</span>
              <span>{{ item.des }}</span>
              <span style="cursor: pointer;" @click="toUrl(item.url)">{{ item.url }}</span>
            </li>
          </ul>
        </vueSeamless>
      </div>
    </template>
  </el-skeleton>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
import vueSeamless from "vue-seamless-scroll/src";
export default defineComponent({
  components: {
    vueSeamless,
  },
  setup() {
    const defaultOption = computed(() => {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    });
    const loading = ref(true);
    const list = ref([
      { name: "vue-seamless-scroll", des: "无限滚动", url: "https://github.com/chenxuan0000/vue-seamless-scroll" },
      { name: "vueuse/motion", des: "动画效果", url: "https://github.com/posva/vue-motion" },
      { name: "vue-json-pretty", des: "json格式化", url: "https://github.com/leezng/vue-json-pretty" },
      { name: "vue-draggable", des: "拖拽排序", url: "https://github.com/SortableJS/Vue.Draggable" },
      { name: "cropperjs", des: "截图裁剪", url: "https://github.com/fengyuanchen/cropperjs" },
      { name: "vue-video-player", des: "视频播放器", url: "https://github.com/kangling098/vue-video-player" },
      { name: "vue-animate-number", des: "数字滚动", url: "https://github.com/wangdahoo/vue-animate-number" },
      { name: "driver.js", des: "引导页", url: "https://gitcode.net/mirrors/kamranahmedse/driver.js?utm_source=csdn_github_accelerator" },
    ]);
    const toUrl = ((url)=>{
      window.open(url)
    })
    setTimeout(() => {
      loading.value = false;
    }, 1000);
    return {
      list,
      loading,
      defaultOption,
      toUrl
    };
  },
});
</script>
<style lang="scss" scoped>
.infinite {
  .top {
    width: 95%;
    height: 40px;
    line-height: 40px;
    display: flex;
    margin: 0 auto;
    font-size: 14px;
    color: #909399;
    font-weight: 400;
    background: #fafafa;

    li {
      width: 34%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .warp {
    width: 95%;
    height: 240px;
    margin: 0 auto;
    overflow: hidden;

    li {
      height: 30px;
      line-height: 30px;
      display: flex;
      font-size: 15px;
    }

    span {
      width: 34%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
